<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es6 通过extends继承</title>
  <!-- 
  在 JavaScript ES6 中，通过  `extends`  关键字可以实现类的继承。这种继承机制允许子类继承父类的属性和方法，从而实现代码的复用和扩展。
  1. 基本概念
  - 父类（Super Class）：被继承的类。
  - 子类（Sub Class）：继承父类的类。
  -  `extends`  关键字：用于创建一个子类，并指定其父类。

  2. 继承的基本语法
  通过  `extends`  关键字定义一个子类，并在子类中使用  `super`  调用父类的构造函数。
   2.1 示例代码
  class Animal {
      constructor(name) {
          this.name = name;
      }

      speak() {
          console.log(`${this.name} makes a noise.`);
      }
  }

  class Dog extends Animal {
      constructor(name) {
          super(name); // 调用父类的构造函数
      }

      speak() {
          console.log(`${this.name} barks.`);
      }
  }

  const dog = new Dog('Rex');
  dog.speak(); // 输出: Rex barks.
  3. 继承的特点
  - 调用父类构造函数：在子类的构造函数中，必须使用  `super()`  调用父类的构造函数，以便正确初始化父类的属性。
  - 方法的重写：子类可以重写父类的方法，以提供特定的实现。
  - 继承属性和方法：子类实例可以访问父类定义的实例属性和方法。

  4. 继承多层级
  ES6 支持多层级的继承，子类可以继承父类，父类又可以继承其他类。

   4.1 示例代码
  class Animal {
      constructor(name) {
          this.name = name;
      }

      speak() {
          console.log(`${this.name} makes a noise.`);
      }
  }

  class Dog extends Animal {
      speak() {
          console.log(`${this.name} barks.`);
      }
  }

  class Puppy extends Dog {
      speak() {
          console.log(`${this.name} whines.`);
      }
  }

  const puppy = new Puppy('Buddy');
  puppy.speak(); // 输出: Buddy whines.
  5. 静态方法的继承
  静态方法也可以被继承，子类可以访问父类的静态方法。

   5.1 示例代码
  class Animal {
      static info() {
          return 'Animals are living beings.';
      }
  }

  class Dog extends Animal {
      static info() {
          return 'Dogs are domesticated animals.';
      }
  }

  console.log(Animal.info()); // 输出: Animals are living beings.
  console.log(Dog.info());    // 输出: Dogs are domesticated animals.
  6. 总结
  通过  `extends`  关键字，ES6 提供了一种简洁的方式来实现类的继承。子类可以继承父类的属性和方法，并可以重写父类的方法以实现特定的功能。这种继承机制使得代码的复用和扩展变得更加容易，增强了 JavaScript 的面向对象编程能力。理解  `extends`  继承的原理和用法对于编写高效和可维护的 JavaScript 代码非常重要。
   -->
</head>

<body>

  <script>
    // 定义父类
    class Animal {
      constructor(name, age) {
        this.name = name;
        this.age = age;
      }

      speak() {
        console.log(`${this.name} makes a noise.`);
      }
    }

    // 定义子类
    class Dog extends Animal {
      constructor(name, age, breed) {
        super(name, age);
        this.breed = breed;
      }

      move() {
        console.log(`${this.name} runs around.`);
      }
    }

    const dog = new Dog('Rex', 3, 'Golden Retriever');
    dog.speak(); // 输出: Rex makes a noise.
    dog.move();  // 输出: Rex runs around.

    class Cat extends Animal {
      constructor(name, age, color) {
        super(name, age);
        this.color = color;
      }

      // 重写方法
      speak() {
        console.log(`${this.name} meows.`);
      }
    }

    const cat = new Cat('Whiskers', 2, 'gray');
    cat.speak(); // 输出: Whiskers meows.


  </script>

</body>

</html>